<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字标注</title>
    <link rel="stylesheet" href="../v6.4.3/css/ol.css">
    <link rel="stylesheet" href="css/overlayDialog.css">
  </head>
  <body>
    <div id="map" style="height: 500px;"></div>
    <span id="guangzhouMarker"></span>
    <!--弹窗-->
    <div id="popup"></div>

    <script src="../v6.4.3/build/ol.js"></script>
    <script>
      //HTMLElement
      const El_guangzhouMarker = document.getElementById('guangzhouMarker')
      const El_popup = document.getElementById('popup')


      //地图图层
      const mapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
      })
      const mapView = new ol.View({
        center: [0, 0],
        zoom: 2
      })
      
      //广州坐标
      const guangzhouPos = ol.proj.fromLonLat([113.16, 23.05])
      const guangzhouMarker = new ol.Overlay({
        position: guangzhouPos,
        positioning: 'center-center',
        element: El_guangzhouMarker,
        stopEvent: false
      })
      const popupMarker = new ol.Overlay({
        element: El_popup,
        position: guangzhouPos
      })

      //
      const map = new ol.Map({
        target: 'map',
        layers: [mapLayer],
        view: mapView
      })
      map.addOverlay(guangzhouMarker)
      map.addOverlay(popupMarker)

      map.on('click', function(e) {
        let el = popupMarker.getElement()
        let coordinate = e.coordinate
        //将地理坐标格式化为半球、度、分和秒的形式
        let hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate))
        popupMarker.setPosition(coordinate)
        el.innerHTML = '<p>The location you clicked was:</p><code>' + hdms + '</code>'
      })

    </script>
  </body>
</html>
